import "package:flutter/material.dart";

import "../../../../config/theme_vars.dart";

class ListItem extends StatelessWidget {
  final Map lock;

  const ListItem({
    super.key,
    required this.lock,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.fromLTRB(12, 12, 16, 12),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [ThemeVars.boxShadow],
        color: Colors.white,
      ),
      child: Row(
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Container(
                      alignment: Alignment.center,
                      padding: const EdgeInsets.all(4),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(4),
                        color: ThemeVars.colorPrimaryLight,
                      ),
                      child: const Text(
                        "房间",
                        style: TextStyle(
                          color: ThemeVars.colorPrimary,
                          fontSize: 10,
                          height: 1,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ),
                    const SizedBox(width: 8,),
                    Text(
                      "${lock["lockName"]} ${lock["type"] == 1 ? "" : "(Wi-Fi)"}",
                      style: const TextStyle(
                        color: ThemeVars.colorText,
                        fontSize: 14,
                        // fontWeight: FontWeight.w600,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 8,),
                const Row(
                  children: [
                    Icon(Icons.electrical_services),
                    Text(
                      "55%",
                      style: TextStyle(
                        fontSize: 14,
                      ),
                    ),
                    SizedBox(width: 10,),
                    Text(
                      "分组一",
                      style: TextStyle(
                        fontSize: 12,
                        color: ThemeVars.colorTextSec,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          const Icon(
            Icons.arrow_forward_ios_rounded,
            size: 18,
            color: ThemeVars.colorTextSec,
          ),
        ],
      ),
    );
  }

}